<html>
<head>
<title>inputExHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../css/inputEx.css' />

<!-- Additional styles -->
<style>
#htmlFormContainer {
	background-color: #ccccff;
	width: 300px;
	margin: 30px;
	padding: 30px;
	border: 15px solid #eeeeff;
}
#htmlFormContainer .title {
	font-size: 16pt;
	font-weight: 16pt;
	margin-bottom: 10px;
}
div.inputEx-Group div.inputEx-label {
	width:63px;
}
</style>

</head>

<body class="yui-skin-sam">
	
	<div id='htmlFormContainer'>
		<p class="title">inputExHTML</p>
		<p class="description">
			inputExHTML is a form to create HTML elements dynamically. 
			Select a tagName, enter its attributes, and click on the "Create !" button.
			(We make the element draggable and resizeable for more fun)<br />
			<br />
			This is an example for the <a href="http://javascript.neyric.com/inputex/">inputEx library</a>.<br />
			Note: CSS style properties must be camelCased (ie you write "borderColor" for "border-color")<br /><br />
		</p>
	</div>

<!-- YUI Library -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<!-- InputEx -->
<script src="../../build/inputex-min.js"  type='text/javascript'></script>
<script type="text/javascript" src="ObjectField.js"></script>
<script>

YAHOO.inputEx.spacerUrl = "../../images/space.gif";

YAHOO.util.Event.addListener(window, "load", function() {
	
	var createHTMLElement = function() {

     var val = form.getValue();
     val.cssStyles.position = "absolute";
		 val.cssStyles.top = "30px";
		 val.cssStyles.left = "450px";
     var el = YAHOO.inputEx.cn(val.tagName, val.attributes, val.cssStyles, val.innerHTML);

		 document.body.appendChild(el);

		 // Make the element draggable and resizable
     var resize = new YAHOO.util.Resize(el);
     new YAHOO.util.DD(resize._wrap); 
  };
	
	form = new YAHOO.inputEx.Form({
		parentEl: 'htmlFormContainer',
		fields: [
	      { type: 'select', inputParams: {label: 'Tag', name: 'tagName', 
											 selectValues: ["div", "script", "img", "a", "input", "p", "br", "span", "b", "iframe"]} },
				{ type: 'object', inputParams: {label: ' ', listLabel: 'attributes', name: 'attributes'} },
				{ type: 'object', inputParams: {label: ' ', listLabel: 'css attributes', name: 'cssStyles'} },
	      { type: 'text', inputParams: {label: 'innerHTML', name: 'innerHTML'}}
		],
	  buttons: [
	      {type: 'button', value: 'Create !', onClick: createHTMLElement },
			  {type: 'button', value: 'Clear', onClick: function() {
	         form.setValue({tagName: 'div', cssStyles:{}, attributes:{}, innerHTML: "" });
	      } }
	   ]
	});

  form.setValue({
		tagName: 'div',
		cssStyles:{
			"backgroundColor": "#ccccff",
			"width": "200px",
			"height": "200px",
			"cursor": "pointer"
		}, 
		attributes:{}, 
		innerHTML: "<p>Hello world !</p><p>Try to drag me !</p><p>You can also resize me !</p>" });

  createHTMLElement();

});

</script>
	
</body>
</html>

